<template>
  <div class="form-content-wrap">
    <template v-for="item in columnItems" :key="item.prop">
      <CommonFormItem
        v-model="form"
        :form-config-disabled="formConfigDisabled"
        :item="item"
        :set-flex="setFlex"
        @on-handle-change-value="onHandleChangeValue"
      />
      <template v-if="item.type === TableColumnOrFormTypeEnum.SLOT">
        <el-form-item
          v-if="!item.isShowCallBack || item.isShowCallBack()"
          :class="item.className"
          :label="item.label"
          :label-width="item.labelWidth"
          :prop="item.prop"
          :style="{
            flex: setFlex(item)
          }"
        >
          <slot :name="item.slotName"></slot>
        </el-form-item>
      </template>
      <template v-if="!item.prop && !item.type">
        <el-form-item
          :class="item.className"
          :style="{
            flex: setFlex(item)
          }"
        />
      </template>
    </template>
  </div>
</template>

<script>
import CommonFormItem from "./CommonFormItem.vue";
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum.ts";

export default defineComponent({
  name: "CommonFormItems",
  components: { CommonFormItem },
  props: {
    modelValue: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formConfigDisabled: {
      type: Boolean,
      default: false
    },
    layoutConfig: {
      type: Object,
      default: () => {
        return {};
      }
    },
    columnItems: {
      type: Array,
      default: () => []
    }
  },
  emits: {
    "update:model-value": null,
    "on-handle-change-value": null
  },

  setup(props, { emit }) {
    const { column = ref(3), columnGap = ref("0px"), rowGap = ref("20px") } = toRefs(props.layoutConfig);

    const layout = {
      columnSize: (96 / column.value).toFixed(2),
      column: column.value,
      gridColumnGap: columnGap.value,
      gridRowGap: rowGap.value
    };
    const form = ref(props.modelValue);

    /**
     *计算当前元素所占列数，由于有中间空隙，所以expand则要乘以2，expand为要增加列数，
     * @param {*} index 当前元素索引
     */
    const setFlex = item => {
      //grid-column：1/5 则为在第五列之前的数据，我们要的是到第五列，所以要加1

      const expand = item.expand || 1;
      // if (column.value == 2 && expand == 2) {
      //   return `0 0 94%`; //92才对齐
      // }
      // if (column.value == 3 && expand == 2) {
      //   return `0 0 96%`; //92才对齐
      // }
      return `0 0 ${expand * layout.columnSize}%`;
    };

    /**
     * 改变值的回调
     */
    const onHandleChangeValue = params => {
      emit("on-handle-change-value", params);
    };
    //#region watch

    watch(
      form.value,
      () => {
        emit("update:model-value", form.value);
      },
      {
        deep: true
      }
    );

    watch(
      () => props.modelValue,
      newVal => {
        form.value = newVal;
      },
      {
        deep: true
      }
    );
    //#endregion

    return {
      form,
      layout,
      TableColumnOrFormTypeEnum,
      setFlex,
      onHandleChangeValue
    };
  }
});
</script>

<style lang="scss" scoped>
.form-content-wrap {
  display: flex;
  flex-wrap: wrap;
  :deep() {
    .el-form-item {
      align-items: center;
      padding-right: v-bind("layout.gridColumnGap");
      margin-bottom: v-bind("layout.gridRowGap");
    }
    .label-line {
      .el-form-item__label {
        line-height: 16px;
      }
    }
    .el-form-item__content {
      > div {
        width: 100%;
        .vxe-pulldown {
          width: 100%;
        }
      }
    }
    .el-date-editor {
      display: flex;
      width: 100%;
    }
    .el-select {
      width: 100%;
    }
    .el-input-number .el-input__inner {
      text-align: left;
    }
  }
}

@media (width <= 1200px) {
  :deep() {
    .el-form-item {
      flex: 0 0 50% !important;
    }
  }
}

@media (width <= 760px) {
  :deep() {
    .el-form-item {
      flex: 0 0 100% !important;
    }
  }
}
</style>
